<template>
   <div class="processMain row">
    <div class="showCard">
      <com-histogram-charts charts-title='流程处理平均用时排名' charts-sub-text='(数值越小效率越高)' charts-id="processFirCharts" charts-font-size='18' :msg.sync="msg"  :charts-url="firchartsurl"></com-histogram-charts>
    </div>
    <div class="showCard middleshocard">
      <div class='cardHeader'>
        <span>
          流程效率排名
        </span>
      </div>
      <div class="cardPicker">
        <button v-for="(key,item) in middleCardLabel" :effectiveness.sync="effectiveness" :class="filiterClickLabel== key ? 'active':''" v-on:click="middleCardCheck(key,item.filiter)">{{item.name}}</button>
      </div>
      <div class="cardTable">
        <table class="table table-striped">
          <thead class="cardTableTheadText">
            <tr>
              <th> </th>
              <th v-for="item in title">{{item.name}}</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in rankList">
              <th scope="row">
                <span class="cardTablerank">{{item.rank}}</span>
              </th>
              <td v-if="item.flow_name">{{item.flow_name}}</td>
              <td v-if="item.depart_name">{{item.depart_name}}</td>
              <td v-if="item.flow_processtime">{{item.flow_processtime}}</td>
              <td v-if="item.total_time">{{item.total_time}}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div>
        <span class="wholeRank">查看完整榜单></span>
      </div>
    </div>
    <div class="showCard">
      <com-histogram-charts charts-title='流程处理量排名' charts-sub-text='(数值越大处理量越大)' charts-id="processLastCharts" charts-font-size='18' :msg.sync="msg"  :charts-url="lastchartsurl"></com-histogram-charts>
    </div>
  </div>
</template>
<script>
import ComHistogramCharts from 'components/histogramCharts.vue';
import { changeKind,changeMsg } from '../vuex/action'
import BS from '../dataManage';
export default {
  data () {
    return {
      rankList: [],
      middleCardLabel:[{
          "name":"最快流程",
          "filiter":"1"
        },{
          "name":"最慢流程",
          "filiter":"2"
        },{
          "name":"最快办理节点",
          "filiter":"3"
        },{
          "name":"最慢办理节点",
          "filiter":"4"
        }],
        filiterClickLabel:'',
        effectiveness:'1'
    }
  },
  props:{
    'rankurl':{
      type:String
    },
    'title':{
      type:Array
    },
    'firchartsurl':{
      type:String
    },
    'lastchartsurl':{
      type:String
    }
  },
  components: {
    ComHistogramCharts
  },
  vuex: {
   getters: {
      kind(state) {
        return state.kind
      },
      msg(state){
        return state.msg
      }
    }
  },
  methods: {
    middleCardCheck:function(elName,filter){
      this.filiterClickLabel=elName;
      this.effectiveness = filter;
    }
  },
  ready(){
    var self = this;
    self.filiterClickLabel='0'
    BS.getRankList.call(self,self.rankurl,self.kind,self.msg,self.effectiveness);
  },
  watch:{
    'msg':function(){
      BS.getRankList.call(this,this.rankurl,this.kind,this.msg,this.effectiveness)
    },
    'kind':function(){
      BS.getRankList.call(this,this.rankurl,this.kind,this.msg,this.effectiveness)
    },
    'effectiveness':function(){
      BS.getRankList.call(this,this.rankurl,this.kind,this.msg,this.effectiveness)
    }
  }
}
</script>

<style scoped>
div.processMain div.showCard {
    width: 32%;
    float: left;
    min-height: 394px;
    border-radius: 10px;
    border:1px solid transparent;
    background-color:#fff;
}
div.processMain div.showcardActive {
    border: 1px solid #2ACDCE;
}
div.processMain div.showCard div.cardHeader {
  width: 100%;
  height: 50px;
}
div.processMain div.showCard div.cardHeader span {
    height: 50px;
    line-height: 50px;
    text-align: center;
    width: 100%;
    display: block;
    color: #b3c2cc;
    font-size: 18px;
}
div.processMain div.showCard div.cardPicker {
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
}
div.processMain div.showCard div.cardPicker button{
    outline:none;
    font: -webkit-mini-control;
    margin-right: 6px;
    height: 26px;
    cursor: pointer;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 6px 4px;
    border-radius: 13px;
    border: 1px solid #A5B7C3;
    color: #A5B7C3;
    background-color: #fff;
}
div.processMain div.showCard div.cardPicker .active{
    background-color: #2ACDCF;
    color: #fff;
    border: 1px solid #2ACDCF;
}
div.processMain div.showCard:hover{
    border: 1px solid #2ACDCF;
}
.middleshocard {
  margin: 0 2%;
}
thead.cardTableTheadText {
  color: #A5B7C3;
}
thead.cardTableTheadText tr th {
  border: none;
}
div.cardTable {
  overflow: hidden;
}
div.cardTable table tbody {
  color: #3f4752;
}
span.cardTablerank {
  display: block;
  color: #fff;
  background: #56D5FF;
  text-align: center;
  height: 20px;
  width: 20px;
  border-radius: 10px;
  padding-top: 2px;
  float: right;
}
span.wholeRank {
  display: block;
  text-align: center;
  color: #A5B7C3;
  font-size: 14px;
  cursor: pointer;
}
.higCharts{
  margin-top: 14px;
}
</style>
